<template>
  <div class="UserManageList">
    <el-row style="text-align: left; margin-bottom: 10px">
      <el-button size="small" type="primary" @click="AddUser()"
        >新增用户</el-button
      >
    </el-row>
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="头像：" style="text-align: left">
              <el-avatar
                src="https://blogimage-1255495010.cos.ap-beijing.myqcloud.com/202210111546361.jpg"
                :size="80"
              ></el-avatar>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="姓名：">
              <el-input v-model="form.name" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="性别：" style="text-align: left">
              <el-radio-group v-model="form.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="生日：">
              <el-date-picker
                size="small"
                type="date"
                placeholder="选择日期"
                v-model="form.birthday"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="民族：" style="text-align: left">
              <template>
                <el-select v-model="form.nation" size="small" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="手机：">
              <el-input v-model="form.phone" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="邮箱：">
              <el-input v-model="form.email" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="政治面貌：">
              <el-input v-model="form.PoliticalOutlook" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
          <el-form-item label="求职意向">
              <el-input v-model="form.JobIntention" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="启用：" style="text-align: left">
              <el-switch v-model="form.Enable"></el-switch
            ></el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="GetFormData()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'UserManageList',
  data () {
    return {
      dialogFormVisible: false,
      form: {
        name: '',
        sex: '',
        birthday: '',
        nation: '',
        phone: '',
        email: '',
        PoliticalOutlook: '',
        JobIntention: '',
        Enable: false
      },
      formLabelWidth: '100px',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }]
    }
  },
  methods: {
    AddUser () {
      console.log('AddUser')
      this.dialogFormVisible = true
    },
    GetFormData () {
      console.log(this.form)
    }
  }
}
</script>
<style scoped lang="scss">
.UserManageList {
  padding-top: 20px;
}
</style>
